<template>
    <div class="index-page">
        <div class="top">
            <div class="top-left">
                <div><span class="left-title">登录机构：</span><span class="left-value">{{ userInfo.orgInfo.orgName }}</span> </div>
                <div><span class="left-title">用户：</span><span class="left-value">{{ userInfo.userName }}</span> </div>
                <div><span class="left-title">数据更新截止时间：</span><span class="left-value">{{ time }}</span> </div>
            </div>
            <div class="top-right">
                <div @click="selectOrg"><img title="切换机构" class="rightIcon" src="@/assets/selectOrg.png"></div>
                <div @click="logout"><i  title="退出登录" class="el-icon-switch-button rightIcon"></i></div>
            </div>
        </div>
        <div class="nav">
            <div class="nav-left">
                <div><img src="@/assets/logo.png"></div>
                <div class="nav-orgName">项目实时管控与成本预警平台 2.0</div>
            </div>
             <div class="nav-content">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="/home">首页</el-menu-item>
                    <el-menu-item index="2">综合报表</el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="message">
            <div class="message-done" @click.stop="selectTodo()">
                <div class="message-top">
                    <div class="message-top-left">
                        <div class="message-num">{{ todoList.reduce((prev,x)=>prev += x.value,0) }}</div>
                        <div class="message-name">待办事项</div>
                    </div>
                    <img src="@/assets/done.png">
                </div>
                <div class="message-bottom">
                    <div v-for="(item,index) in twoTodoList" :key="index" @click.stop="selectTodo(item.label)">
                        <span class="message-bottom-point blue">·</span>
                        <span class="message-bottom-name">{{ item.label }}</span>
                        <span class="message-bottom-num">{{ item.value }}</span>
                    </div>
                    <el-dropdown @command="selectTodo">
                        <span class="el-dropdown-link">
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item,index) in todoList" :key="index" :command="item.label">{{item.label + `【${item.value}】` }}</el-dropdown-item>
                        </el-dropdown-menu>
                   </el-dropdown>
                </div>
            </div>
            <div class="message-warning">
                <div class="message-top">
                    <div class="message-top-left">
                        <div class="message-num">0</div>
                        <div class="message-name">系统通知</div>
                    </div>
                    <img src="@/assets/warning.png">
                </div>
                <div class="message-bottom">
                    <div>
                        <span class="message-bottom-point yellow">·</span>
                        <span class="message-bottom-name">招标</span>
                        <span class="message-bottom-num">0</span>
                    </div>
                    <div>
                        <span class="message-bottom-point yellow">·</span>
                        <span class="message-bottom-name">收支合同</span>
                        <span class="message-bottom-num">0</span>
                    </div>
                </div>
            </div>
            <div class="message-notice">
                <div class="message-top">
                    <div class="message-top-left">
                        <div class="message-num">0</div>
                        <div class="message-name">异常预警</div>
                    </div>
                    <img src="@/assets/notice.png">
                </div>
                <div class="message-bottom">
                    <div>
                        <span class="message-bottom-point red">·</span>
                        <span class="message-bottom-name">招标</span>
                        <span class="message-bottom-num">0</span>
                    </div>
                    <div>
                        <span class="message-bottom-point red">·</span>
                        <span class="message-bottom-name">收支合同</span>
                        <span class="message-bottom-num">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
// eslint-disable-next-line no-unused-vars
import { showLoading, hideLoading, formatDate, parseList, treeToList, openAppClient } from '@/utils/common'
import todoRequest from '@/api/todo/todo.js'
export default {
    computed: {
        ...mapState(['userInfo']),
        ...mapState('equip', ['equipData'])
    },
    data () {
        return {
            activeIndex: '/home',
            time: '',
            todoList: [],
            twoTodoList: [],
            billTypeList: {},
            billTypes: [],
        }
    },
    mounted () {
        this.time = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
        this.getBills()
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        handleSelect (e) {
            console.log('🚀 ~ e', e)
            // this.$router.push(e)
        },
        getTodo () {
            showLoading()
            let params = {
                appId: 'WEB',
                taskClass: '',
                user: this.userInfo.userId
            }
            todoRequest.gettodotasks(params).then(async res=>{
                const arr = []
                for(let key in this.billTypeList) {
                    this.getModule(key)
                    const obj = {}
                    obj.label = key
                    obj.value = this.filterFn(res, this.billTypes, 'billNum').length
                    arr.push(obj)
                }
                this.todoList = arr
                this.twoTodoList = arr.slice(0, 3)
            }).finally(() => {
                hideLoading()
            })
        },
        //获取所有单据
        async getBills () {
            const res = await todoRequest.getBills()
            const tree =  parseList(res, 'billId', 'parentId', '0')
            this.billTypeList = {}
            tree.forEach(item=>{
                const list = treeToList([item])
                this.billTypeList[item.billName] =  list.filter(x=>x.isLeaf === 1).map(x=>x.billCode)
            })
            this.getTodo()
        },
        //模块
        getModule (name) {
            if(!name || name === '全部') {
                this.billTypes = []
            }else{
                this.billTypes = this.billTypeList[name]
            }
        },
        //过滤数据
        filterFn (arr, serchArr, key) {
            if(serchArr.length == 0) { //如果是空数组  就返回全部数据
                return arr
            }else{
                return serchArr.map(v => {
                    return arr.filter(item => {
                        return item[key] === v
                    })
                }).flat()
            }
        },
        //跳转待办
        selectTodo (name) {
            this.$router.push(`/todoTop?typename=${name ? name : '全部'}`)
        },
        //切换机构
        selectOrg () {
            openAppClient('/switchorg', '选择机构', res=>{
                console.log('🚀 ~ res', res)
                if(res) {
                    localStorage.setItem('orgId', res[0].orgId)
                    window.location.reload(true)
                }
            }, null, ()=>{console.log(2)})
        },
        //退出登录
        logout () {
            this.clientPop('info', '是否退出登录', ()=>{
                this.$router.push('/login')
                localStorage.clear()
            })
        },

    }
}
</script>
<style lang="scss">
.index-page{
    height: 100vh;
    background: #eff2f6;
    padding: 0 10px;
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        .top-left{
            display: flex;
            div{
                margin-right: 30px;
                .left-title{
                    color: #888888;
                }
            }
        }
        .top-right{
            display: flex;
            margin-right: 20px;
            >div{
                margin-left:30px;
                .rightIcon{
                    cursor: pointer;
                    height: 20px;
                    color: #3566d8;
                    font-weight: 700;
                    font-size: 20px;
                }
            }
        }
    }
    .nav{
        background: #fff;
        height: 100px;
        display: flex;
        align-items: center;
        padding: 10px;
        .nav-left{
            display: flex;
            align-items: center;
            margin-right: 50px;
            div{
                margin-right: 10px;
                font-size: 18px;
                font-weight: bold;
                &.nav-orgName{
                    max-width: 500px;
                }
            }
        }
    }
    .message{
        display: flex;
        width: 100%;
        margin-top: 20px;
       .message-done,.message-warning,.message-notice{
            padding: 20px;
            background: #fff;
            width: 33%;
            border-radius: 5px;
            cursor: pointer;
       }
       .message-warning{
        margin:0 20px;
       }
       .message-top{
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .message-num{
                font-size: 30px;
                color: #333333;
                font-weight: bold;
            }
            .message-name{
                font-size: 14px;
                color: #888888;
                line-height: 26px;
            }
       }
       .message-bottom{
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #888888;
            height: 50px;
            align-items: center;
            >div{
                display: flex;
                align-items: center;
                .message-bottom-point{
                    font-size: 20px;
                    font-weight: bold;
                    &.blue{
                        color: #2e61d7;
                    }
                    &.yellow{
                        color: #fbc71b;
                    }
                    &.red{
                        color: #e9513e;
                    }
                }
                .message-bottom-name{
                    margin-right: 10px;
                }
            }

       }
    }
}
</style>
